Skip to content

feat: redesign UI — migrate from PicoCSS to Bootstrap 5#46

Draft
mroderick wants to merge 4 commits into
mainfrom
feature/codebar-design-clean
Draft

feat: redesign UI — migrate from PicoCSS to Bootstrap 5#46
mroderick wants to merge 4 commits into
mainfrom
feature/codebar-design-clean

Conversation

@mroderick

@mroderick mroderick commented Jul 14, 2026

Copy link
Copy Markdown
Collaborator

Summary

Redesign all pages of the codebar auth app using Bootstrap 5 with the codebar brand palette. Switches from PicoCSS to Bootstrap 5, adds custom brand CSS, and restructures components/routes to match.

image image image

Commits

Commit Message
4066a9d feat: add Bootstrap 5 assets and codebar brand CSS
1f2d9f1 feat: migrate UI components from PicoCSS to Bootstrap 5
9ec79e1 refactor: update routes for Bootstrap component APIs

Changes

  • Layout: nav bar with codebar logo + "auth" wordmark, Open Sans font, data-bs-theme="auto" for dark mode
  • Home: centered welcome page with codebar logo mark for signed-out state; green success alert + profile/logout actions when signed in
  • Login: centered layout, full-width auth method buttons
  • Magic link: centered form with form-label + form-control
  • Profile: Bootstrap card with magenta header accent stripe, description list (dl.row) layout
  • Admin: Bootstrap table-hover with table-light head, responsive wrapper, inline form-select for role, "No users found" empty state
  • Alerts: custom brand variants (alert-cb-error, -success, -info)
  • Buttons: btn-cb-primary (Trust Blue), btn-outline-danger (logout), btn-outline-secondary (navigation links)
  • Navigation: links styled as outline-secondary buttons

Tests

161/161 passing. Removed FormSection export (no longer used),
default callbackURL in GitHub OAuth changed to /profile.

@mroderick
mroderick force-pushed the feature/codebar-design-clean branch 2 times, most recently from c292321 to 10e3229 Compare July 14, 2026 12:34
Comment thread src/app/components/layout.js Outdated
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not gdpr compatible

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! I will fix that!

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've pushed a commit that fixes this, and have also fixed the similar issue in codebar/planner: codebar/planner#2714

Create shared STATIC_VERSION module and heroku-postbuild script.
.version file is generated at build time from SOURCE_VERSION (set by
Heroku during build), falling back to env vars then 'dev' for local.
Add Bootstrap 5.3 CSS and JS bundles, codebar brand stylesheet,
and logo assets (PNG + SVG). Configure fallow to ignore static
directory and eslint for static file patterns.
Replace PicoCSS colour classes with custom Bootstrap brand variants:
- Alerts: alert-cb-error, alert-cb-success, alert-cb-info
- Buttons: btn-cb-primary, btn-outline-danger (logout)
- Layout: nav bar with codebar logo + 'auth' wordmark, system font stack
- Cards: Bootstrap card with card-header-cb (magenta accent stripe)
- Tables: Bootstrap table-hover with table-light header row
- Home: centred welcome page with SVG logo for signed-out state
- Profile: description list (dl.row) layout inside card
- Login: centred layout with full-width auth method buttons
- Navigation: links styled as outline-secondary buttons
- All static asset URLs include version stamp via STATIC_VERSION
@mroderick
mroderick force-pushed the feature/codebar-design-clean branch from e95d9ad to 64bc1ee Compare July 18, 2026 12:56
@mroderick

mroderick commented Jul 18, 2026

Copy link
Copy Markdown
Collaborator Author

I had to add an extra commit 89a2e16 to fix a mistake I made in #48, where I didn't properly verify that things work in Heroku.

In the new commit, we create a file that holds the version from SOURCE_VERSION during the post install step, as this is not available in the runtime environment 🤷

I tidied up the git history at the same time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants